<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<style type="text/css">

body.caution {
cursor: help ;
}

table.mine-sweeper {}

table.mine-sweeper td {
background-color: #F0F0F0 ;
border: 1px solid #333333 ;
cursor: pointer ;
height: 25px ;
line-height: 25px ;
overflow: hidden ;
text-align: center ;
width: 25px ;
}

table.mine-sweeper td.active {
background-color: #D8D8D8 ;
}

table.mine-sweeper td.bomb {
font-weight: bold ;
}

table.mine-sweeper td.bombed {
background-color: #FFD0D0 ;
color: #CC0000 ;
font-weight: bold ;
}

table.mine-sweeper td.caution {
background-color: #FFD0D0 ;
color: #CC0000 ;
font-weight: bold ;
}

</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.randrange.js"></script>
<script type="text/javascript" src="js/jquery.repeatstring.js"></script>
<script type="text/javascript" src="js/jquery.randomfilter.js"></script>
<script type="text/javascript" src="js/jquery.near.js"></script>
<script type="text/javascript" src="js/jquery.minesweeper.js"></script>

<script type="text/javascript">
// When the DOM is ready, build the mine sweeper game.
jQuery(function( $ ){

	var mineSweerper = new MineSweeper(
		$( "table.mine-sweeper" ),
		10,
		10,				
			"10%"
		
	);

});

</script>
	
</head>
<body>
<center>
	<h1>jQuery扫雷</h1>
	
	<table cellspacing="2" class="mine-sweeper"><tbody>
    <tr><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="">1</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td></tr>
    <tr><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active bomb">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td><td class="active">&nbsp;</td></tr></tbody></table>
</center>	

<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">何杰</a></p>
</div>
</body>
</html>